import {lazy, useEffect, useState} from "react";
import { Input } from 'antd';
import {render} from "react-dom";

const Kong = lazy(async ()=>import("./kong"))
const Man = lazy(async ()=>import("./man"))

function viewcom(props){
    useEffect(()=>{
        console.log("显示邮件组件",props,Kong)
    },[])
    const xianshi =(shuju)=>{
        console.log(props.neirong,"内容是不是空的",props.neirong==={})
        return <div className="w-full h-full flex flex-col justify-start items-center">
            <h1 className="text-30px my-5 text-center w-full h-40px leading-40px font-semibold">{shuju.name}</h1>
            <div className="w-1000px">
                {shuju.neirong}
            </div>
            <div className="w-1000px flex justify-end items-center mt-20px">
                <span className="text-gray-400 select-none">{shuju.createTime}</span>
            </div>
        </div>
    }
    return (
        <div className="w-full h-full relative">
            <div className="absolute top-0 bottom-0 left-0 w-40 overflow-x-hidden overflow-y-auto">
                <Input placeholder="请输入关键字" allowClear onChange={(e)=>{props.search(e.target.value)}} />
                {props.emaillist.map((item,index)=>{
                    return (
                        <div className={["w-full h-10 border bg-gray-200 hover:bg-blue-300 juzhong cursor-pointer",props.activeid===item.id?"bg-blue-300":""].join(" ")}
                             onClick={()=>{props.dianji(item)}}
                             key={item.name+index}>
                            <span>{item.name}</span>
                        </div>
                    )
                })}
                {props.children}
            </div>
            <div className="absolute top-0 bottom-0 left-40 right-0 bg-yellow-300">
                {JSON.stringify(props.neirong) == "{}"?<Kong/>:xianshi(props.neirong)}
            </div>
        </div>
    )
}

export default viewcom